<template>
  <div class="index-form form-contain">
    <div class="index-right">
      <h2>首页轮播图管理</h2>
      <h5>建议使用宽750像素*高350像素的图片；点击下方"确认提交"按钮后生效。最多上传5张</h5>
      <el-upload
          class="avatar-uploader"
          action="https://jyapi.epanshi.com/api/uploadFile/"
          :before-remove="_removeImg"
          list-type="picture-card"
          :http-request="_loadImg"
          :file-list="fileList"
          :on-change="changeImg"
          :on-exceed='exced'
          :limit="5"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
       <el-button type='primary' style="margin-top:100px;margin-left:15%" @click.stop="_uploadImgList">提交</el-button>
    </div>
  </div>
</template>

<script>
import { loadImg, uploadImgList, getImgList } from '@/api/img'
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
      form: {
      }
    }
  },
  created () {
    this._getImgList()
  },
  methods: {
    _uploadImgList () {
      let fileList = []
      let imgList = []
      this.fileList.length && this.fileList.forEach(item => {
        item.id && fileList.push({id: item.id, img_url: item.url})
      })
      this.imgList.forEach(item => {
        item && imgList.push(item)
      })
      if ([...imgList, ...fileList].length !== 0) {
        uploadImgList({
          group_id: 1,
          imgList: [...imgList, ...fileList]
        }).then(res => {
          if (res.code === 1) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this._getImgList()
          } else {
            this.$message.error(res.errmsg)
          }
        })
      } else {
        this.$message({
          message: '图片不能为空！',
          type: 'info'
        })
      }
    },
    _getImgList () {
      getImgList({
        group_id: 1
      }).then(res => {
        let fileList = []
        res.data.forEach(item => {
          fileList.push({name: item.group_name, url: item.img_url, id: item.id})
        })
        this.fileList = fileList
        this.imgList = []
      })
    },
    exced () {
      this.$message({
        type: 'warning',
        message: '轮播图最多只能上传5张图片！'
      })
    },
    _loadImg () {
    },
    // 加载新的图片
    _uploadImg (file, fileList) {
      fileList.forEach((item, index) => {
        if (JSON.stringify(file.raw) === JSON.stringify(item.raw)) {
          let formData = new FormData()
          formData.append('file', item.raw)
          loadImg(formData).then(res => {
            if (res.code === 1) {
              this.$set(this.imgList, index, res.data)
            }
          })
        }
      })
    },
    // 图片改变之后
    changeImg (file, fileList) {
      this._uploadImg(file, fileList)
    },
    // 图片移除时的处理
    _removeImg (file, fileList) {
      fileList.forEach((item, index) => {
        if (JSON.stringify(file.raw) === JSON.stringify(item.raw)) {
          this.fileList = fileList
          this.imgList.splice(index, 1)
        }
      })
    },
    // 限制图片
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片必须是JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
    }
  }
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 200px;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
  .index-right{
    float: left;
    margin-left: 30%;
    .el-upload-list__item.is-success{
      display: block;
      margin-bottom: 35px;
    }
    .el-upload-list__item.is-ready{
      display: block;
      margin-bottom: 35px;
    }
    h6{
      margin-left: 80px;
    }
  }
}
</style>
